<template>
  <div class="adventure-container gradient-bg">
    <div class="back-btn" @click="$router.back()">
      <el-button type="primary" circle icon="ArrowLeft" />
    </div>
    <h1 class="page-title text-gradient">英语星球探险记 🗺️</h1>
    <div class="planets-map">
      <div 
        v-for="(planet, index) in planets" 
        :key="index" 
        class="planet-item glass rounded-xl cursor-pointer"
        @click="enterPlanet(planet)"
      >
        <div class="planet-icon">{{ planet.icon }}</div>
        <div class="planet-name">{{ planet.name }}</div>
        <div class="planet-progress">
          <el-progress :percentage="planet.progress" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const planets = ref([
  { name: '三上星球', icon: '🌍', grade: '三上', progress: 80, unlocked: true },
  { name: '三下星球', icon: '🌎', grade: '三下', progress: 60, unlocked: true },
  { name: '四上星球', icon: '🌏', grade: '四上', progress: 40, unlocked: true },
  { name: '四下星球', icon: '🪐', grade: '四下', progress: 20, unlocked: true },
  { name: '五上星球', icon: '⭐', grade: '五上', progress: 10, unlocked: false },
  { name: '五下星球', icon: '💫', grade: '五下', progress: 0, unlocked: false },
  { name: '六上星球', icon: '🌟', grade: '六上', progress: 0, unlocked: false },
  { name: '六下星球', icon: '✨', grade: '六下', progress: 0, unlocked: false }
])

const enterPlanet = (planet: any) => {
  if (!planet.unlocked) {
    ElMessage.warning('该星球尚未解锁')
    return
  }
  // 跳转到学习页面，带上年级参数
  router.push(`/learn?grade=${planet.grade}`)
}
</script>

<style scoped lang="scss">
.adventure-container {
  width: 100%;
  height: 100%;
  padding: 30px;
  overflow-y: auto;
  position: relative;
}

.back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
}

.page-title {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 50px;
}

.planets-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.planet-item {
  padding: 40px;
  text-align: center;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-10px) scale(1.05);
  }

  .planet-icon {
    font-size: 5rem;
    margin-bottom: 20px;
  }

  .planet-name {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
</style>

